import React, { useContext } from 'react';

// 1. 创建一个上下文
const TitleContext = React.createContext()

const Second = ()=>{

  // useContext 该方法是用来接收祖先组件通过 Context.Provider 传递的参数用的
  // useContext 该 hooks 中接收一个参数，这个参数就是我们通过 createContext 创建的 Context
  const user = useContext(TitleContext)

  return (
    <>
      <h1>Second</h1>
      <p>
        {user.title} -- {user.msg}
      </p>
    </>
  )
}

const First = ()=>{
  const user = useContext(TitleContext)
  return (
    <>
      <h1>First</h1>
      <p>
        {user.title} -- {user.msg}
      </p>
      <hr />
      <Second />
    </>
  )
}

const App = () => {
  return (
    <div>
      <TitleContext.Provider value={{title: '传家宝', msg: '失败是成功之母，但是你失败次数多了，...。'}}>
        <First />
      </TitleContext.Provider>
    </div>
  );
};

export default App;
